<template>
  <Modal v-model="modelIsOpen" width="650" mask :closable="false">
    <template #footer>
      <Button size="default" @click="cancel" :loading="btnLoading">取消</Button>
      <Button type="primary" size="default" :loading="btnLoading" @click="ok"
        >确定</Button
      >
    </template>
    <zz-Label text="用户赋权"></zz-Label>
    <div class="container" ref="container" @scroll="scrollToTop">
      <Space direction="vertical" size="default" type="flex">
        <zz-Form
          ref="zzForm"
          title="基本信息"
          :model="model"
          :rules="ruleValidate"
          key="1"
        >
          <Col span="12">
            <FormItem label="用户编码" prop="userCode">
              <Input
                v-model="model.userCode"
                placeholder="请输入..."
                :border="false"
                disabled
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="用户姓名" prop="userName">
              <Input
                v-model="model.userName"
                :border="false"
                placeholder="请输入..."
                disabled
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="手机号" prop="telephone">
              <Input
                v-model="model.telephone"
                placeholder="-"
                :border="false"
                disabled
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="邮箱" prop="email">
              <Input
                v-model="model.email"
                :border="false"
                placeholder="-"
                disabled
              ></Input>
            </FormItem>
          </Col>
        </zz-Form>
        <zz-Form
          ref="zzForm1"
          title="系统配置"
          :model="model"
          :rules="ruleValidate"
        >
          <Col span="18">
            <FormItem label="角色" prop="roleIds">
              <TreeSelect
                v-model="roleIds"
                multiple
                :data="roleTree"
                show-checkbox
                @on-change="changeRole"
              />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="使用系统">
              <Switch v-model="useSys" />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="菜单权限">
              <Input
                v-model="model.menuRight"
                placeholder="请输入..."
                disabled
              ></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="数据权限">
              <Input
                v-model="model.dataRight"
                placeholder="请输入..."
                disabled
              ></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="首页挂件">
              <Input
                v-model="model.pendant"
                placeholder="请输入..."
                disabled
              ></Input>
            </FormItem>
          </Col>
          <Col span="12" v-if="useSys">
            <FormItem label="登录账号" prop="loginAccount">
              <Input
                v-model="model.loginAccount"
                placeholder="请输入..."
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="失效时间" prop="failureTime">
              <DatePicker
                type="date"
                v-model="model.failureTime"
                placeholder="请选择..."
                transfer
              />
            </FormItem>
          </Col>
        </zz-Form>
      </Space>
    </div>
  </Modal>
</template>

<script>
export default {
  name: 'addUser',
  emits: ['query'],
  watch: {
    modelIsOpen: {
      async handler(newVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: false,
    },
  },
  data() {
    const validateLoginAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录账号'))
      } else {
        callback()
      }
    }
    return {
      modelIsOpen: false,
      loading: false,
      btnLoading: false,
      useSys: true,
      modifyPassWord: '1',
      roleIds: [],
      model: {
        userId: '',
        userCode: '',
        userName: '',
        telephone: '',
        email: '',
        loginAccount: '',
        passWord: '',
        failureTime: new Date(),
      },
      companyList: [],
      roleList: [],
      roleTree: [],
      ruleValidate: {
        loginAccount: [
          {
            validator: validateLoginAccount,
            trigger: 'change',
          },
        ],
      },
    }
  },
  methods: {
    async init() {
      await this.getRoleInfo()
    },
    // 获取当前用户涉及的角色信息
    async getRoleInfo() {
      this.loading = true
      let res = await this.$API.roleManagement.role.getRoleInfo.get(
        this.model.userId
      )
      if (res.code === '01') {
        this.roleIds = res.data.roleIds
        // 将列表转成树
        res.data.roleDtos.forEach((e) => {
          e.title = e.roleName
          e.selected = false
          e.checked = false
        })
        this.roleTree = this.$XEUtils.toArrayTree(res.data.roleDtos, {
          key: 'roleId',
        })
        this.loading = false
      }
    },
    // 确定
    async ok() {
      // 校验
      let valid = await this.$refs.zzForm1.validate()
      if (!valid) {
        return
      }
      this.btnLoading = true
      let params = { ...this.model }
      params.failureTime = this.model.failureTime.getTime()
      params.modifyPassWord = this.modifyPassWord
      params.roleIds = this.roleIds
      params.useSys = this.useSys ? '1' : '0'
      let res = await this.$API.userManagement.user.empower.post(params)
      if (res.code === '01') {
        this.$Message.success('保存成功')
        this.cancel()
        this.btnLoading = false
      } else {
        this.$Message.error(res.message)
        this.btnLoading = false
      }
    },
    // 取消
    cancel() {
      this.modelIsOpen = false
      this.reset()
      this.$emit('query')
    },
    // 改变角色
    changeRole(value) {
      this.roleIds = value
    },
    // 重置
    reset() {
      this.$TOOL.clearObject(this.model)
      this.roleIds = []
    },
  },
}
</script>

<style>
.container {
  overflow-y: auto;
  padding: 8px 2px;
}
</style>
